<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div >
        <div id="app">
            <!-- 1 ref 当作用在原生的标签上的时候 可以取代原生的DOM操作 是原生的语法糖   -->
             <p ref='p'  id="p1">我是标题P </p>

            <!-- vue组件  如果 ref 属性用在子组件上，引用就指向子组件实例--> 
            <!-- this.$refs.aaa  === aaa内部的 vue实例  app  -->
            <aaa ref='ccc'></aaa>
        </div>
 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        // import aaa from './63aaa'

        // 定义一个全局组件


        Vue.component('aaa',{
            data:function() {
                return {
                    name:'helloworld组件'
                }
            },
            methods:{
                fn1() {
                    alert('子组件弹窗')
                }
            },
            template:'<h1>{{name}}</h1>'
        })



   
        var vm = new Vue({
            // 监管的容器 
            el:'#app',
            // 数据定义
            data:{
                msg:'helloworld',
                msg2:'你好世界'
            },
            // 生命周期 渲染之后
            mounted() {
                // 原生的方式  
            //    var p1 = document.getElementById('p1')
            //     p.innerHTML ='新的标签文字'


                // var $refs = {}
                // var p = document.getElementById('p')
                // $refs.p =p 
                console.log(this.$refs.p)
               
                setTimeout(() => {
                    this.$refs.p.innerHTML ='新的标签文字'
                }, 3000);



                // 组件上的 用法 
                this.$refs.ccc.name = '新的名字'
                this.$refs.aaa.fn1()
            }
        })
     
        console.log('vm',vm)

      

    </script>
</body>

</html>